<template>
	<view class="zxsList padd">
		<block v-if="isHasDataFlag == true">
			<view class="listItem"
				v-for="(item,index) in zxsList"
				:key="index"
				 @tap="goZxsDet(item.id)"
			>
				<view class="zxsImg posRel defBg">
					<image class="samePar posAbso ltzero" :src="getCloudFilePath(item.zjImg)" mode="aspectFill" lazy-load></image>
					<view v-if="!item.yyFlag" class="typeTag posAbso ltzero hasFull">今日已满</view>
					<view v-if="item.yyFlag" class="typeTag posAbso ltzero">今日可约</view>
					<view class="zxsArea ellip">{{item.prov}}·{{item.city}}</view>
				</view>
				<view class="zxsInfo">
					<view class="zxsName spaceBet">
						<view class="nameTit hasFlex">
							<text>{{item.realName}}</text>
							<block v-if="item.serviceLevel == 0">
								<view class="zxsTag jxZxs" v-if="item.zxLevel == 1">见习咨询师</view>
								<view class="zxsTag ptZxs" v-if="item.zxLevel == 2">普通咨询师</view>
								<view class="zxsTag zsZxs" v-if="item.zxLevel == 3">资深咨询师</view>
								<view class="zxsTag zjZxs" v-if="item.zxLevel == 4">专家咨询师</view>
							</block>
							<block v-else>
								<view class="fwsTag cjBg" v-if="item.serviceLevel == 1">初级服务师</view>
								<view class="fwsTag zjBg" v-if="item.serviceLevel == 2">中级服务师</view>
								<view class="fwsTag gjBg" v-if="item.serviceLevel == 3">高级服务师</view>
							</block>
						</view>
						<view class="zxPrice" v-if="item.serviceFee > 0"><text class="step">¥</text>{{item.serviceFee}}</view>
					</view> 
					<view class="zxsZc">
						<view class="zcItem">{{calZsName(item.zsName)[0]}}</view>
					</view>
					<view class="zcNum">
						<view>服务时长{{item.serviceHours}}小时</view>
						<view class="line">|</view>
						<view>{{item.serviceTimes}}人咨询</view>
					</view> 
					<view class="fields clearfix">
						<view class="fieldsTag"
							v-for="(innerItem,innerIndex) in calZsName(item.scRange)"
							:key="innerIndex"
						>{{innerItem}}</view>
					</view>
					<view class="pjInfo spaceBet">
						<view class="pjScore">
							<view v-if="item.pjScore > 0"> 
								<htz-rate v-model="item.pjScore" readonly :size="24" :gutter="10" :type="1"></htz-rate>
							</view>
							<view class="pjNum" v-if="item.pjTotalNum > 0"><text class="numTxt">{{item.pjTotalNum}}</text>人评价</view>
						</view>
						<view v-if="!item.yyFlag" class="yyBtn disab">今日已满</view> 
						<view v-if="item.yyFlag" class="yyBtn">去预约</view>
					</view>
				</view>
			</view>
			<block v-if="showMoreTxtFlag">
				
			</block>
			<block v-else>
				<loading-view :loading="loading"></loading-view>
			</block>
		</block>
		<block v-else-if="isHasDataFlag == false"> 
			<no-data></no-data>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			zxsList:Array,
			isHasDataFlag:Boolean,
			loading:Boolean,
			showMoreTxtFlag:{
				type:Boolean,
				default:false
			}
		},
		computed:{
			calZsName(){
				return function(zsName){
					if(zsName != ''){
						var tmpArr = zsName.split(',');
						return tmpArr;
					}
				}
			}
		},
		data(){
			return{
			
			}
		},
		methods:{
			//跳转咨询师详情
			goZxsDet(id){
				this.$emit('goZxsDet',id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.zxsList{
		padding: 0 30rpx;
		.listItem{
			border-bottom: 1rpx solid #eee;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			.zxsImg{
				width: 206rpx;
				height: 265rpx;
				border-radius: 12rpx;
				/* background: pink; */
				margin-right: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.samePar{
					border-radius: 12rpx;
					z-index: 9;
				}
				.typeTag{
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 16rpx;
					font-size: $font-size22;
					color: #fff;
					background: rgba(0,196,149,.8);
					border-radius: 12rpx 0 12rpx 0;
					z-index: 10;
					&.hasFull{
						background: #a9a9ab;
					}
				}
				.zxsArea{
					width: 100%;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					border-radius: 0 0 12rpx 12rpx;
					background: rgba(0,0,0,.3);
					z-index: 10;
				}
			}
			.zxsInfo{
				width: 68%;
				/* 评价 */
				.pjInfo{
					font-size: $font-size24;
					align-items: center;
					.pjScore{
						display: flex;
						align-items: center;
						.pjNum{
							margin-left: 15rpx;
							color: $pss-text-colora;
							.numTxt{
								color: #ffa510;
								margin-right: 5rpx;
							}
						}
					}
					.yyBtn{
						height: 50rpx;
						line-height: 50rpx;
						padding: 0 20rpx;
						border-radius: 50rpx;
						color: $pss-colorFFF;
						font-size: $font-size26;
						background: $pss-color-primary_1;
						&.disab{
							background: #f4f4f4;
							color: #adadad;
						}
					}
				}
				/* 擅长领域 */
				.fields{
					margin-bottom: 10rpx;
				}
				.fieldsTag{
					padding: 0 15rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 10rpx;
					font-size: $font-size24;
					border:1rpx solid #eefaf6;
					background: #eefaf6;
					color: $pss-color-green;
					float: left;
					margin: 0 10rpx 10rpx 0;
				}
				/* 咨询Num */
				.zcNum{
					display: flex;
					font-size: $font-size24;
					color: $pss-text-colora;
					margin-bottom: 10rpx;
					.line{
						margin:0 10rpx;
					}
				}
				/* 咨询师职称 */
				.zxsZc{
					margin-bottom: 10rpx;
				}
				.zcItem{
					font-size: $font-size28;
					color: $pss-text-color3;
				}
				.zxsName{
					height: 60rpx;
					line-height: 60rpx;
					font-size: $font-size36;
					font-weight: bold;
					color: $pss-text-color3;
					margin-bottom: 10rpx;
					.nameTit{
						align-items: center;
					}
					.fwsTag,
					.zxsTag{
						height: 40rpx;
						line-height: 40rpx;
						color: #fff;
						font-size: 24rpx;
						padding: 0 15rpx;
						margin-left: 15rpx;
						font-weight: normal;
					}
					.fwsTag{
						border-radius: 0 50rpx 50rpx 0;
					}
					.zxsTag{
						border-radius: 6rpx;
						&.jxZxs{
							background: linear-gradient(to bottom,#c7c7c7,#7d7d7d );
						}
						&.ptZxs{
							background: linear-gradient(to bottom,#f2c9ad,#a4795b );
						}
						&.zsZxs{
							background: linear-gradient(to bottom,#918fd7,#3b396d );
						}
						&.zjZxs{
							background: linear-gradient(to bottom,#ffce71,#da8e17 );
						}
					}
					.zxPrice{
						color: $pss-color-red;
						font-size: $font-size34;
						.step{
							font-weight: normal;
							font-size: $font-size22;
							margin-left: 5rpx;
						}
					}
				}
			}
		}
	}
</style>